/**
 * Created by 123 on 2017/3/23.
 */
'use strict'
import React, {Component} from 'react'

import weather1 from '../assets/weather1.jpg'

export default class extends React.Component {

  render() {
    const {pm25, pm10, temperature, quality, getDate}=this.props;

    return (
      <div>
        <div id="top" style={{color: '#ffffff',}}>
          <Top
            getDate={getDate}
            temperature={temperature}
            quality={quality}
          />
          <Messag
            pm25={pm25}
            pm10={pm10}/>

          <DayMessage/>

        </div>


      </div>
    )

  }

}

class Top extends Component {
  render() {
    const {temperature, quality, getDate}=this.props;
    return (
      <div id="top_top" style={{paddingLeft: 10, display: 'flex', paddingTop: 10}}>
        <div style={{flex: 1}}>
          <div>
            <button style={{fontSize: '40'}} onClick={getDate}>{temperature}°</button>
          </div>
          <div style={{fontSize: 12}}>
            <text>贵阳</text>
            <text> |</text>
            <text>多云</text>
          </div>
        </div>
        <div>
          <text style={{fontSize: '30', paddingRight: 10,}}>{quality}</text>
        </div>
      </div>
    )
  }
}

class Messag extends Component {
  render() {
    const {pm25, pm10}=this.props;
    return (
      <div style={{display: 'flex', textAlign: 'center', paddingTop: '100', paddingBottom: '5'}}>
        <div style={{flex: 1}}>
          <text style={{fontSize: '12'}}>风向</text>
          <br/>
          <text >东北风</text>
        </div>
        <image style={{background: '#ffffff', width: 1, marginTop: '5', marginBottom: '5'}}/>
        <div style={{flex: 1}}>
          <text style={{fontSize: '12'}}>PM2.5</text>
          <br/>
          <text >{pm25}</text>
        </div>
        <image style={{background: '#ffffff', width: 1, marginTop: '5', marginBottom: '5'}}/>
        <div style={{flex: 1}}>
          <text style={{fontSize: '12'}}>PM10</text>
          <br />
          <text >{pm10}</text>
        </div>
      </div>
    )
  }
}

class DayMessage extends Component {
  render() {
    const {data}=this.props;

    return (
      <div style={{background: '#ffffff', paddingTop: '5'}}>
        <DayMessageItem/>
        <hr
          style={{color: '#d9d9d9', size: '1', marginLeft: '10%'}}/>
        <DayMessageItem/>
        <hr
          style={{color: '#d2d2d2', size: '1', marginLeft: '10%'}}/>
        <DayMessageItem/>
        <hr
          style={{color: '#d2d2d2', size: '1'}}/>
      </div>
    )
  }
}

class DayMessageItem extends Component {
  render() {
    return (
      <div >
        <span style={{display: 'flex', margin: '10'}}>
          <div style={{flex: 1}}>
             <img src={weather1} style={{width: '25', height: '25', margin: '0 auto', display: 'block'}}/>
          </div>

          <div style={{flex: 2}}>
            <div style={{display: 'flex', flexDirection: 'column'}}>
              <text style={{fontSize: '12', flex: 1, color: '#000000'}}>今天</text>
            <br />
            <text style={{fontSize: '11', flex: 1, color: '#535353'}}>多云</text>
            </div>

          </div>

          <text style={{flex: 1, lineHeight: '-moz-block-height', color: '#535353', fontSize: '15'}}>23`/9`</text>
        </span>


      </div>
    )
  }
}
